<html>

<head>
    <link rel="stylesheet" href="style.css">
    <style></style>
    <script type="module" src="jumps.js"></script>
</head>

<body>
    <div class="col">
        <h2>片段渲染器</h2>
        <p>
            <pre>
<value>Bars</value> - 条形。
<value>Line</value> - 线条。
<value>SharpBars</value> - 尖角条形。
<value>RoundBars</value> - 圆角条形。</pre>
        </p>
        <h4>属性</h4>
        <hr>
        <!---->
        <!--2-->
        <div class="pborder"><h6>条形</h6>
            <dl>
                <dt id="colorFrom">起始颜色</dt>
                <dd>
                    <p>第一个条形的颜色。</p>
                </dd>
                <dt id="colorTo">结束颜色</dt>
                <dd>
                    <p>最后一个条形的颜色。</p>
                </dd>
                <dt id="fixedHeight">固定高度</dt>
                <dd>
                    <p>如果设置为非<value>0</value>的值，则条形的高度将保持不变。</p>
                </dd>
                <dt id="barHeightMultiplier">高度倍率</dt>
                <dd>
                    <p>调整条形的高度。</p>
                </dd>
                <dt id="barWidth">宽度</dt>
                <dd>
                    <p>条形的宽度。</p>
                </dd>
                <dt id="barWidthAffectedByShape">宽度跟随形状</dt>
                <dd>
                    <p>如果设置，条形的两端宽度将根据<value>形状路径</value>而扩展。</p>
                </dd>
                <dt id="mirror">镜像</dt>
                <dd>
                    <p>如果设置，条形将向两个方向扩展。</p>
                </dd>
            </dl>
        </div>
        <!--2-->
        <hr>
        <!--2-->
        <div class="pborder"><h6>线条</h6>
            <dl>
                <dt id="colorFrom">起始颜色</dt>
                <dd>
                    <p>第一个点的颜色。</p>
                </dd>
                <dt id="colorTo">结束颜色</dt>
                <dd>
                    <p>最后一个点的颜色。</p>
                </dd>
                <dt id="fixedHeight">固定高度</dt>
                <dd>
                    <p>如果设置为非<value>0</value>的值，则线条的高度将保持不变。</p>
                </dd>
                <dt id="barHeightMultiplier">高度倍率</dt>
                <dd>
                    <p>调整线条的高度。</p>
                </dd>
                <dt id="mirror">镜像</dt>
                <dd>
                    <p>如果设置，线条将向两个方向扩展。</p>
                </dd>
                <dt id="flipEveryOther">交替翻转</dt>
                <dd>
                    <p>如果设置，线条上每隔一个点的高度会被翻转。</p>
                </dd>
            </dl>
        </div>
        <!--2-->
        <hr>
        <!--2-->
        <div class="pborder"><h6>尖角条形</h6>
            <dl>
                <dt id="colorFrom">起始颜色</dt>
                <dd>
                    <p>第一个条形的颜色。</p>
                </dd>
                <dt id="colorTo">结束颜色</dt>
                <dd>
                    <p>最后一个条形的颜色。</p>
                </dd>
                <dt id="fixedHeight">固定高度</dt>
                <dd>
                    <p>如果设置为非<value>0</value>的值，则条形的高度将保持不变。</p>
                </dd>
                <dt id="barHeightMultiplier">高度倍率</dt>
                <dd>
                    <p>调整条形的高度。</p>
                </dd>
                <dt id="barWidth">宽度</dt>
                <dd>
                    <p>条形的宽度。</p>
                </dd>
                <dt id="mirror">镜像</dt>
                <dd>
                    <p>如果设置，条形将向两个方向扩展。</p>
                </dd>
            </dl>
        </div>
        <!--2-->
        <hr>
        <!--2-->
        <div class="pborder"><h6>圆角条形</h6>
            <dl>
                <dt id="colorFrom">起始颜色</dt>
                <dd>
                    <p>第一个条形的颜色。</p>
                </dd>
                <dt id="colorTo">结束颜色</dt>
                <dd>
                    <p>最后一个条形的颜色。</p>
                </dd>
                <dt id="fixedHeight">固定高度</dt>
                <dd>
                    <p>如果设置为非<value>0</value>的值，则条形的高度将保持不变。</p>
                </dd>
                <dt id="barHeightMultiplier">高度倍率</dt>
                <dd>
                    <p>调整条形的高度。</p>
                </dd>
                <dt id="barWidth">宽度</dt>
                <dd>
                    <p>条形的宽度。</p>
                </dd>
                <dt id="barWidthAffectedByShape">宽度跟随形状</dt>
                <dd>
                    <p>如果设置，条形的两端宽度将根据<value>形状</value>而扩展。</p>
                </dd>
                <dt id="mirror">镜像</dt>
                <dd>
                    <p>如果设置，条形将向两个方向扩展。</p>
                </dd>
            </dl>
        </div>
        <!--2-->
        <!---->
    </div>


    <style media="screen" type="text/css">
        .container {
            width: 100%;
        }

        .container div {
            width: 100%;
        }

        .container .header {
            padding: 2px;
            cursor: pointer;
        }

        .container .content {
            display: none;
        }
    </style>


</body>
<script>
    // 获取当前页面的 URL
    const url = window.location.href;
    
    // 查找 URL 中的片段标识符
    const fragmentIndex = url.indexOf('#');
    
    if (fragmentIndex !== -1) {
        // 提取片段标识符后的内容
        const targets = decodeURI(url.substring(fragmentIndex + 1)).split(' ');
        for (const value of targets) {
            let target = document.getElementById(value)
            target.classList.remove('blink')
            target.classList.add('blink')
            setTimeout(() => target.classList.remove('blink'), 1400)
            if (index == 0)
                target.scrollIntoView()
        }
    
    } else {
        console.log('No fragment in URL.');
    }
    function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }
    
    var hide
    
    for (const value of document.querySelectorAll('property')) {
        value.addEventListener('click', (event) => {
            let top = document.body.scrollTop
            console.log(top)
            document.querySelector('.back').classList.remove('hide')
            clearTimeout(hide)
            hide = setTimeout(() => document.querySelector('.back').classList.add('hide'), 5000)
            document.querySelector('.back').addEventListener('click', () => {
                document.body.scrollTop = top
                document.querySelector('.back').classList.add('hide')
            })  
    
            let ids = event.target.getAttribute('query').split(' ')
            for (let index = 0; index < ids.length; index++) {
                const id = ids[index];
                let target = document.getElementById(id)
                target.classList.remove('blink')
                target.classList.add('blink')
                setTimeout(() => target.classList.remove('blink'), 1400)
                if (index == 0&&!isElementInViewport(target))
                    target.scrollIntoView()
            }
        })
    }</script>
</html>